<template>
  <view class="code-flex-col page">
    <z-paging
      ref="paging"
      :auto="false"
      autoShowBackToTop
      bg-color="#FAFAFAFF"
      cell-height-mode="dynamic"
      class="order-list"
      use-virtual-list
      @query="queryList"
    >
      <template #top>
        <view class="u-search-box">
          <u-search placeholder="搜索" @search="search" />
        </view>
        <u-tabs :list="tableList" @change="tabsChange" />
        <DaDropdown
          ref="daDropdownRef"
          v-model:dropdownMenu="menuList"
          :duration="300"
          menuActiveText
          textColor="#333333"
          themeColor="#FF4852"
          @confirm="daDropdownConfirm"
        >
          <template #slot1="art">
            <view class="flex items-center ml-2">
              <view
                v-for="(opt, optIdx) in options"
                :key="optIdx"
                :class="optIdx === activeColor ? 'is-actived' : ''"
                class="da-dropdown-filter-item da-dropdown-tag"
                @click="handleRadioChange(optIdx)"
              >
                <text class="da-dropdown-tag--text">{{ opt.label }}</text>
              </view>
            </view>
            <wu-calendar
              :date="date"
              :fold="false"
              :isHeader="false"
              :monthShowCurrentMonth="false"
              :rangeEndRepick="false"
              :rangeHaveDisableTruncation="false"
              :rangeSameDay="false"
              :selected="[]"
              :showMonth="false"
              clearDate
              color="#3c9cff"
              insert
              lunar
              mode="range"
              slideSwitchMode="vertical"
              startWeek="sun"
              type="month"
              @change="calendarChange"
            />
            <PartDropdownFooter @confirm="timeConfirm" @reset="timeReset" />
          </template>
        </DaDropdown>
      </template>
      <template #cell="{ item }">
        <view class="code-flex-col list" @tap.stop="routerPath(item.id)">
          <view class="code-flex-row code-mt-6 list-item">
            <image :src="projectToPicture(item.actPhoto)" class="code-shrink-0 code-self-start image_4" />
            <view class="code-ml-10 code-flex-col code-flex-1">
              <text class="code-self-stretch font_4">
                {{ item.actName }}
                <br />
              </text>
              <text class="code-self-start font_5 text_12">评分{{ item.actScore }}</text>
              <text class="code-self-start font_6 text_13">
                {{ formattedDate(item.actStartTime) }}-{{ formattedDate(item.actEndTime) }}
              </text>
              <text class="code-self-start font_7 text_14">武汉.武汉体育中心体育馆</text>
              <view class="code-flex-row code-justify-between code-items-center code-self-stretch group_4">
                <view class="code-flex-col code-justify-start code-items-center text-wrapper_3">
                  <text class="font_9 text_15">
                    {{ item.actServe }}
                  </text>
                </view>
                <view class="code-flex-row code-items-end group_5">
                  <text class="font_8 ml-3">￥{{ item.actMinPrice / 100 }}</text>
                  <text class="font_9 text_16 ml-3">起</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
import { RequestInterface } from '@/typings/request';
import DaDropdown from '@/components/da-dropdown/index.vue';
import {
  formattedDate,
  getCurrentWeekRange,
  getLastMonthRange,
  getLastWeekRange,
  mostFormattedDate
} from '@/utils/date';
import { ACTIVITIES } from '@/api/activities';
import { PUBLIC_API } from '@/api/publicApi';
import { DICTIONARY_CONFIGURATION } from '@/constants/base';
import PartDropdownFooter from '@/components/da-dropdown/components/part-dropdown-footer.vue';
import { isEmpty } from 'xe-utils';
import WuCalendar from '@/uni_modules/wu-calendar/components/wu-calendar/wu-calendar.vue';

const tableList = ref([
  {
    name: '足球比赛'
  },
  {
    name: '演唱会'
  },
  {
    name: '音乐节'
  },
  {
    name: '话剧音乐剧'
  },
  {
    name: '脱口秀'
  }
]);

const activeColor = ref(0);

const options = [
  { label: '全部时间', value: [], formValue: [] },
  { label: '一周内', value: getLastWeekRange('YYYY-MM-DD'), formValue: getLastWeekRange() },
  { label: '一个月内', value: getLastMonthRange('YYYY-MM-DD'), formValue: getLastWeekRange() },
  { label: '本周内', value: getCurrentWeekRange('YYYY-MM-DD'), formValue: getLastWeekRange() }
];

const date = ref(options[activeColor.value].value);

const menuList = ref([
  {
    title: '全部时间',
    prop: 'god6',
    type: 'slot1'
  },
  {
    title: '筛选',
    type: 'filter',
    prop: 'god4',
    // 默认选中单选2、多选2、3、滑动30
    // value: { ft1: '2', checkbox: ['2', '3'], ft3: 30 },
    options: [
      {
        title: '服务/折扣',
        type: 'checkbox',
        prop: 'checkbox',
        options: [
          { label: '有票', value: 'ticket' },
          { label: '可选座', value: 'seat' },
          { label: '折扣', value: 'discount' }
        ]
      },
      {
        title: '服务/折扣',
        type: 'radio',
        prop: 'radio',
        options: [
          { label: '100以内', value: '[0, 10000]' },
          { label: '100-300', value: '[10000, 30000]' },
          { label: '300-500', value: '[30000, 50000]' },
          { label: '500以上', value: JSON.stringify([50000, '']) }
        ]
      }
    ]
  },
  {
    title: '筛选',
    type: 'cell',
    prop: 'orderBy',
    value: '2',
    options: [
      { label: '热度', value: '2' },
      { label: '最近更新', value: '3' },
      { label: '开演时间', value: '4' },
      { label: '距离', value: '5' }
    ]
  }
]);

const handleRadioChange = (index) => {
  activeColor.value = index;

  date.value = options[activeColor.value].value;

  const timeList = options[activeColor.value].formValue;
  if (timeList.length) {
    formData.actStartTime = timeList[0];
    formData.actEndTime = timeList[1];
  } else {
    formData.actEndTime = '';
    formData.actStartTime = '';
  }

  paging.value.reload();

  daDropdownRef.value?.handlePopupHide();
};

const calendarChange = (e) => {
  if (activeColor.value !== -1) {
    activeColor.value = -1;
  }
  const { range } = e;
  date.value = [range.before, range.after];

  formData.actEndTime = mostFormattedDate(range.after, 'YYYY-MM-DD', 'YYYYMMDDHHmmss');
  formData.actStartTime = `${mostFormattedDate(range.before, 'YYYY-MM-DD', 'YYYYMMDD')}235959`;
};

const $http: RequestInterface = inject('$http') as RequestInterface;
// tabs头部

// 列表实例
const paging = ref(null);

// 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！

const formData = reactive({
  actType: -1,
  actName: '',
  actEndTime: '',
  actStartTime: '',
  ticket: '', // 有票
  seat: '', // 选座: 1代表加入筛选
  discount: '', // 折扣: 1代表加入筛选
  orderBy: '2', // 排序字段 [1: 推荐，2:热度，3: 最近更新，4:开演时间，5: 距高]
  actMinPrice: '', // 最小价格
  actMaxPrice: '' // 最高价格
});

const tabsChange = (params) => {
  formData.actType = params.value;
  paging.value.reload();
};

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (current, size) => {
  // 加载loading
  uni.showLoading({
    title: '列表加载中...',
    mask: true
  });
  // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  // 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
  $http.post({
    url: ACTIVITIES.LIST_ACTIVITY_TO_TYPE_GP_VO,
    data: {
      current,
      size,
      ...formData
    },
    success: (res) => {
      // 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
      paging.value.complete(res || []);
    },
    fail: () => {
      paging.value.complete(false);
    },
    complete: () => {
      uni.hideLoading();
    }
  });
};

// 获取字典配置
const getDictionaryConfiguration = () => {
  $http.get({
    url: PUBLIC_API.LIST_DICT_DATA_BY_TYPE,
    data: { dictType: DICTIONARY_CONFIGURATION.ACT_TYPE },
    success: (res) => {
      tableList.value = res.map((item) => ({ ...item, name: item.dictLabel, value: item.dictValue }));
      formData.actType = res[0].dictValue;
      paging.value.reload();
    }
  });
};

const daDropdownRef = ref(null);

// 时间确定筛选
const timeConfirm = () => {
  paging.value.reload();

  // 操作完成后关闭弹窗
  daDropdownRef.value?.handlePopupHide();
};

// 时间重置筛选
const timeReset = () => {
  date.value = [];
  activeColor.value = 0;
  formData.actEndTime = '';
  formData.actStartTime = '';
};

// 搜索
const search = (value) => {
  formData.actName = value;
  paging.value.reload();
};

const list = ['ticket', 'seat', 'discount'];

// 下拉确定
const daDropdownConfirm = (params) => {
  // 如果筛选的value是一个空对象的话,就要删除所有筛选项
  if (isEmpty(menuList.value[1].value)) {
    list.forEach((key) => {
      formData[key] = '';
    });
    formData.actMinPrice = '';
    formData.actMaxPrice = '';
  }

  const { god4, orderBy } = params;
  // 筛选
  if (god4 && god4.checkbox) {
    list.forEach((key) => {
      formData[key] = god4.checkbox.includes(key) ? 1 : '';
    });
  }

  // 服务折扣
  if (god4 && god4.radio) {
    const [actMinPrice, actMaxPrice] = JSON.parse(god4.radio);
    // 金额乘以100单独说明
    formData.actMinPrice = actMinPrice;
    formData.actMaxPrice = actMaxPrice;
  }

  if (orderBy) {
    formData.orderBy = orderBy;
  }

  // 调用刷新接口
  paging.value.reload();
};

// 下拉选取消
const routerPath = (id) => {
  uni.$u.route({
    url: '/pages/activities/activitiesDetails',
    params: {
      id
    }
  });
};

onReady(() => {
  getDictionaryConfiguration();
});

const projectToPicture = (orderPhoto) => {
  const picture = JSON.parse(orderPhoto || '[]');
  if (picture.length) {
    return picture[0].path;
  }
  return '';
};
</script>

<style lang="scss" scoped>
.da-dropdown-filter {
  &-box {
    padding: 0 24rpx;
    line-height: 1;
  }

  &--title {
    flex-shrink: 0;
    padding: 20rpx 0;
    font-size: 26rpx;
    color: var(--dropdown-text-color);
    white-space: nowrap;
  }

  &-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

:deep(.da-dropdown-footer--confirm) {
  background-color: #007aff !important;
  border-color: #007aff !important;
}

.da-dropdown-tag {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56rpx;
  border-radius: 40rpx;
  padding: 12rpx 22rpx;
  opacity: 1;
  margin: 20rpx 20rpx 20rpx 0;
  overflow: hidden;
  font-size: 24rpx;
  color: var(--dropdown-text-color);
  background-color: #f5f5f5;
  border-radius: 999rpx;
  border: 1px solid transparent;

  &--text {
    position: relative;
    word-break: normal;
    white-space: nowrap;
    z-index: 1;
  }

  &.is-actived {
    color: var(--dropdown-theme-color);
    background-color: #fff;
    border: 1px solid var(--dropdown-theme-color);
    background-color: #e5efffff !important;

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
      content: '';
      background-color: var(--dropdown-theme-color);
      opacity: 0.05;
    }
  }
}

:deep(.da-dropdown-tag) {
  border: 1px solid transparent;

  & .is-actived {
    border: 1px solid #007aff;
  }
}

:deep(.da-dropdown-tag).is-actived {
  border: 1px solid #007aff;
  background-color: #e5efffff !important;
  color: #007aff !important;
}

.list {
  padding-top: 12rpx;

  .list-item {
    padding: 20rpx;
    background-color: #ffffff;

    &:first-child {
      margin-top: 0;
    }

    .image_4 {
      border-radius: 8rpx;
      width: 144rpx;
      height: 200rpx;
    }

    .font_4 {
      font-size: 32rpx;
      font-family: PingFang;
      line-height: 38rpx;
      font-weight: 800;
      color: #171726;
    }

    .text_11 {
      margin-top: 8rpx;
    }

    .font_5 {
      font-size: 20rpx;
      font-family: 萍方-简;
      line-height: 18.44rpx;
      color: #ff9c4b;
    }

    .text_12 {
      margin-top: 12rpx;
    }

    .font_6 {
      font-size: 24rpx;
      font-family: 萍方-简;
      line-height: 28rpx;
      color: #171726;
    }

    .text_13 {
      margin-top: 16rpx;
    }

    .font_7 {
      font-size: 24rpx;
      font-family: 萍方-简;
      line-height: 23.74rpx;
      color: #171726;
    }

    .text_14 {
      margin-top: 8rpx;
      line-height: 22.56rpx;
    }

    .group_4 {
      margin-top: 20rpx;

      .text-wrapper_3 {
        padding: 8rpx 0;
        background-color: #ffffff;
        border-radius: 8rpx;
        padding: 5rpx 10rpx;
        height: 40rpx;
        border-left: solid 2rpx #696975;
        border-right: solid 2rpx #696975;
        border-top: solid 2rpx #696975;
        border-bottom: solid 2rpx #696975;
        display: flex;
        align-items: center;
        justify-content: center;
        //.text_15 {
        //  line-height: 18.5rpx;
        //}
      }

      .group_5 {
        margin-right: 44rpx;

        .image_5 {
          width: 20rpx;
          height: 24rpx;
        }

        .font_8 {
          font-size: 32rpx;
          font-family: PingFang;
          line-height: 23.74rpx;
          font-weight: 700;
          color: #ff4852;
        }

        .text_16 {
          line-height: 18.34rpx;
        }
      }

      .font_9 {
        font-size: 20rpx;
        font-family: PingFang;
        line-height: 18.44rpx;
        font-weight: 300;
        color: #696975;
      }
    }
  }
}
</style>
